<template>
  <div>
    <div>上传你的帅照</div>
    <input type="file" @change="handler" accept="image/*">
    <div>预览：</div>
    <img :src="imgSrc" style="width: 60px;">
  </div>
</template>

<script setup>
import axios from "axios";
import { ref } from 'vue'
const imgSrc = ref('')

const handler = async(event) => {
  // 1、获取上传二进制信息
  const file = event.target.files[0]
  if(!file){
    alert('请上传文件')
    return
  }
  // 2、预览图片
  // 创建FileReader对象用于读取文件内容
  const reader = new FileReader()
  // 开始以DataURL格式读取文件内容
  reader.readAsDataURL(file)
  // 文件读取完成时的回调函数，将结果赋值给imgSrc用于预览
  reader.onload = (event) => {
    imgSrc.value = event.target.result
  }
  // 创建FormData对象用于构建表单数据
  const formData = new FormData()
  // 将文件添加到FormData中，字段名为'avatar'
  formData.set('avatar', file)

  // 3、上传给服务器
  let { data } = await axios.post('http://127.0.0.1:3000/upload', formData)
  console.log(data);
}
</script>